import React from 'react';

const ItemCard = ({ item, similarity, index, onMouseEnter, onMouseLeave, onClick }) => {
    const handleMouseEnter = (e) => {
        onMouseEnter(item, e);
    };
    const handleMouseMove = (e) => {
        onMouseEnter(item, e);
    };
    const handleClick = (e) => {
        if (onClick) onClick(item, e);
    };

    return (
        <div
            className="item-card"
            onMouseEnter={handleMouseEnter}
            onMouseLeave={onMouseLeave}
            onMouseMove={handleMouseMove}
            onClick={handleClick}
        >
            <div className="item-number">{index + 1}</div>
            <div className="item-name">{item.itemFullName}</div>
            <div className="item-similarity">{(similarity * 100).toFixed(1)}%</div>
        </div>
    );
};

export default ItemCard;